<!--修改信息收集表-->
<!--CollentionList-->
<template>
  <div id="coll-list">
    <!-- 顶部 -->
    <div class="header">
      <component :is="header"></component>
    </div>
    <!-- 顶部end -->
    <!-- 内容start -->
    <div class="container">
      <!-- 顶部 start-->
      <el-row :gutter="5" class="coll-row1">
        <el-col :span="16">
          <h1 class="coll-title">编辑信息收集表</h1>
        </el-col>
        <el-col :span="5">
          <el-switch
            v-model="status"
            :disabled="statusDisable"
            active-value="1"
            inactive-value="2"
            active-text="启用"
            inactive-text="禁用"
            @change="updateCollectionStstus()"
          ></el-switch>
        </el-col>-
        <el-col :span="3">
          <el-button type="primary" @click="updateCollection()">修改</el-button>
        </el-col>
      </el-row>
      <!-- 顶部 end-->
      <!-- 中间 start-->
      <el-card>
        <div style="margin-top: 12px">
          <!-- 收集表标题、详情 start-->

          <el-row class="coll-title-row el-row-comment1">
            <el-col :span="12">
              <div class="coll-span1">
                <span>收集表名称</span>
              </div>
              <div class="coll-title-row-input1">
                <el-input v-model="collectionDataList.title" placeholder="标题"></el-input>
              </div>
            </el-col>
          </el-row>
          <el-row class="coll-title-row-input2 el-row-comment1">
            <el-col>
              <div class="coll-span1">
                <span>收集表详情</span>
              </div>
              <div>
                <ckeditor :editor="editor" v-model="collectionDataList.info" :config="editorConfig"></ckeditor>
              </div>
            </el-col>
          </el-row>
          <!-- 收集表标题、详情 end-->
          <!-- 强制填写 start-->

          <el-row class="el-row-comment1">
            <el-col :span="2">
              <div class="coll-span2">
                <span>强制填写</span>
              </div>
            </el-col>
            <el-col :span="4" style="padding-top:4px;">
              <el-radio-group v-model="collectionDataList.constraint">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-col>
            <el-col :span="2">
              <div class="coll-span2">
                <span>报名费</span>
              </div>
            </el-col>
            <el-col :span="4" style="padding-top:4px;">
              <el-radio-group
                v-model="collectionDataList.payment"
                @change="collShowFree"
                :disabled="payMent"
              >
                <el-radio :label="1">是</el-radio>

                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-col>

            <el-col :span="3" style="margin-top:-5px;margin-left:-50px;">
              <div v-show="showRadio3">
                <el-input :placeholder="collectionDataList.price" disabled></el-input>
              </div>
            </el-col>
          </el-row>
          <!-- 强制填写 end-->
          <!-- 选择班级start -->
          <el-row>
            <el-col :span="8">
              <el-row>
                <el-col :span="5">
                  <div class="coll-span1">
                    <span>选择班级</span>
                  </div>
                </el-col>

                <el-col :span="3" :offset="1">
                  <div>
                    <el-button type="primary" @click="dialogVisible = true">点击选择</el-button>
                  </div>
                </el-col>
              </el-row>
            </el-col>

            <!--选择班级弹出框 -->
            <el-dialog title="选择需要添加的班级" :visible.sync="dialogVisible">
              <el-tree
                :data="notChoosedClazzsList"
                show-checkbox
                v-model="notChoosedClazzsList"
                default-expand-all
                node-key="notChoosedClazzsList[].clazzId"
                ref="tree1"
                @check="(click, checked)=>{handleNodeClick(click, checked)}"
                highlight-current
              ></el-tree>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="selectClazzsId">确 定</el-button>
              </span>
            </el-dialog>

            <!-- 选择班级 end-->
            <el-col :span="12">
              <div class="coll-span1">
                <span>已选择班级列表</span>
              </div>
              <el-table
                :data="ChoosedClazzsList"
                style="margin-top:-15px; margin-left:-10px;"
                :show-header="false"
              >
                <el-table-column prop="name"></el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <!-- 选择班级end -->
          <!-- 上传附件start-->
          <el-row class="el-row-comment1">
            <el-col :span="18">
              <el-row>
                <el-col :span="4">
                  <div class="coll-span1">
                    <span>上传附件</span>
                  </div>
                </el-col>
                <el-col :span="16">
                  <div>
                    <el-upload
                      :auto-upload="true"
                      list-type="text"
                      :headers="headers"
                      name="attachment"
                      :show-file-list="true"
                      :action="uploadUrl"
                      :limit="1"
                    >
                      <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!-- 上传附件 end-->

          <!-- 选择开始时间 结束时间 start-->

          <el-row class="el-row-comment1">
            <el-col :span="12">
              <div class="coll-span1">
                <span>选择开始时间</span>
              </div>
              <div class="coll-date">
                <el-date-picker
                  v-model="collectionDataList.startTime"
                  type="datetime"
                  placeholder="选择开始时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  @change="selectStartTime"
                ></el-date-picker>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="coll-span1">
                <span>选择结束时间</span>
              </div>
              <div>
                <el-date-picker
                  v-model="collectionDataList.endTime"
                  type="datetime"
                  placeholder="选择结束时间"
                  @change="selectEndTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </div>
            </el-col>
          </el-row>
          <!-- 选择开始时间 结束时间 end-->
          <div class="coll-span2">
            <span>设置收集表信息</span>
          </div>

          <el-form :disabled="true">
            <el-row>
              <el-form-item v-for="(item, index) in collectionFormList" :key="index">
                <el-col :span="5">
                  <span>标题：</span>
                  <el-input v-model="item.title" placeholder="标题"></el-input>
                </el-col>
                <el-col :span="12">
                  <span>描述：</span>

                  <el-input v-model="item.note" type="textarea" placeholder="描述"></el-input>
                </el-col>
                <el-col :span="5">
                  <el-switch
                    v-model="item.constraint"
                    :active-value="1"
                    :inactive-value="2"
                    active-text="必填"
                    inactive-text="非必填"
                  ></el-switch>
                </el-col>
              </el-form-item>
            </el-row>
          </el-form>
          <!--自定义选项 end-->
        </div>
      </el-card>
      <!-- 中间 end-->
    </div>
    <!-- 内容end -->
    <!-- 底部 -->
    <div class="footer">
      <component :is="footer"></component>
    </div>
    <!-- 底部end -->
  </div>
</template>
<script>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import TeacherHeader from "../../components/TeacherHeader.vue";
import Footer from "../../components/Footer.vue";
let cicToken = window.localStorage.getItem("cicToken");
export default {
  data() {
    return {
      uploadUrl:
        "http://172.18.84.23:8888/collection-service/collection/attachment/add/1?cicToken=adsdsds",
      fileList: [],
      headers: { cicToken: cicToken },
      // 定义组件
      header: "TeacherHeader",
      footer: "Footer",

      // 获取到的后台数据列表
      showRadio3: true,
      collectionDataList: {
        collectionId: "",
        title: "",
        info: "",
        constraint: "",
        payment: "",
        price: "",
        startTime: "",
        endTime: ""
      },
      status: "",
      statusDisable: false,
      collectionFormList: [],
      ChoosedClazzsList: [],
      // 禁用报名费选框
      payMent: true,
      // 报名开始、结束时间
      startTime: "",
      endTime: "",
      // 班级ID
      addClassList: [],

      // 班级

      dialogVisible: false,
      CollegesData: [],
      allClassList: [],
      // 没有添加的班级的列表
      notChoosedClazzsList: [],
      // 富文本编辑器
      editor: ClassicEditor,
      editorData: "",
      editorConfig: {
        // The configuration of the editor.
        language: "zh-cn", // 配置语言
        uiColor: "#FFF", // 背景颜色
        width: "auto", // 宽度
        height: "300px", // 高度
        skin: "office2003", // 界面v2,kama,office2003
        toolbarCanCollapse: false, // 工具栏是否可以被收缩
        resize_enabled: true, // 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js
        ckfinder: {
          uploaded: 1,
          url: "/"
          // 后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
        },
        toolbar: [
          "heading", //段落
          "|", //分隔
          "bold", //加粗
          "italic", //倾斜
          "bulletedList", //项目列表
          "numberedList", //编号列表
          "undo", //撤销
          "redo" //重做
        ] //工具栏显示
      }
      // 富文本编辑器end
    };
  },
  created() {
    // 获取跳转时带过来的id
    this.collectionDataList.collectionId = this.$route.query.collectionId;
    this.selectTableList();
    // this.getAllClazzs();
    this.selectChoosedClazzs();
  },
  methods: {
    //修改收集表的状态
    updateCollectionStstus() {
      if (this.status == 2) {
        //禁用
        this.$put_form(
          this.$urlPath.collection +
            "/collection/stopStatus/" +
            this.collectionDataList.collectionId
        )
          .then(resp => {
            console.log(resp);
            if (resp.code == 200) {
              return this.$message.success(resp);
            } else {
              this.status = "1";
              console.log(this.status);
              return this.$message.error(resp);
            }
          })
          .catch(error => {
            console.log(error);
          });
      } else {
        this.$put_form(
          this.$urlPath.collection +
            "/collection/openStatus/" +
            this.collectionDataList.collectionId
        )
          .then(resp => {
            console.log(resp);
            if (resp.code == 200) {
              return this.$message.success(resp);
            } else {
              this.status = "2";
              return this.$message.error(resp);
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    // 修改收集表
    updateCollection() {
      this.$put_json(
        this.$urlPath.collection +
          "/collection/update?addClazzIds=" +
          this.addClassList,
        {
          collectionId: this.collectionDataList.collectionId,
          title: this.collectionDataList.title,
          info: this.collectionDataList.info,
          constraint: this.collectionDataList.constraint,
          startTime: this.collectionDataList.startTime,
          endTime: this.collectionDataList.endTime
        }
      )
        .then(resp => {
          if (resp.code == 200) {
            return this.$message.success(resp);
          } else {
            return this.$message.error(resp);
          }
        })
        .catch(error => {
          return this.$message.error(resp);
        });
    },
    // 查询收集表数据
    selectTableList() {
      this.$get(
        this.$urlPath.collection +
          "/collection/teaGetSelfCollection/" +
          this.collectionDataList.collectionId
      )
        .then(resp => {
          if (resp.code == 200) {
            this.collectionDataList = resp.data; //收集表对象
            this.collectionFormList = resp.data.options;
            this.startTime = resp.data.startTime;
            if (resp.data.status == "1" || "2" || "3") {
              this.status = "1";
            } else if (resp.data.status == "4") {
              this.status = "2";
            } else {
              this.statusDisable = true;
              this.status = "2";
            }
          }

          console.log(this.status);
        })
        .catch(error => {
          console.log(error);
        });
    },
    handleNodeClick(click, checked) {
      this.classLists = checked.checkedNodes;
      console.log(this.classLists);
    },
    // 确认选择班级
    selectClazzsId() {
      if (this.classLists == null) {
        this.$message.error("请选择需要填写的班级");
      } else if (this.classLists.length == 0) {
        this.$message.error("请选择需要填写的班级");
      } else {
        this.addClassList = new Array();
        for (let i = 0; i < this.classLists.length; i++) {
          this.addClassList.push(this.classLists[i].id);
        }
        this.dialogVisible = false;
      }
    },
    // 查询所有班级end
    // 查询已被选择的班级
    selectChoosedClazzs() {
      this.$get(
        this.$urlPath.collection + "/collection/collectionRelationClazz/" +this.collectionDataList.collectionId
      )
        .then(resp => {
          if (resp.code == 200) {
            this.ChoosedClazzsList = resp.data;
            // 查询所有的班级
            this.$get(this.$urlPath.school + "/school/classes").then(resp => {
              if (resp.code != 200) {
                return this.$message.error(resp.message);
              }
              this.allClassList = resp.data;
              let notChoosedClazzsList = new Array();
              // 剔除掉已选中的班级
              for (let i = 0; i < this.allClassList.length; i++) {
                let flag = false;
                for (let j = 0; j < this.ChoosedClazzsList.length; j++) {
                  let id = this.allClassList[i].clazzId;
                  let id2 = this.ChoosedClazzsList[j].clazzId;
                  if (id == id2) {
                    flag = true;
                    continue;
                  }
                }
                if (!flag) this.notChoosedClazzsList.push(this.allClassList[i]);
              }

              for (let i = 0; i < this.notChoosedClazzsList.length; i++) {
                console.log("------" + this.notChoosedClazzsList.length);
                this.notChoosedClazzsList[i] = {
                  id: this.notChoosedClazzsList[i].clazzId,
                  label: this.notChoosedClazzsList[i].name
                };
              }
            });
          }
          console.log(resp);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 查询已被选择的班级end
    // 选择开始时间
    // 当选择确定时间时触发
    selectStartTime() {
      if (this.collectionDataList.startTime <= this.startTime) {
        console.log(this.startTime);

        this.$message.error("报名开始时间不能早于之前开始时间");
      } else if (
        this.collectionDataList.startTime >= this.collectionDataList.endTime
      ) {
        this.$message.error("报名开始时间不能晚于截止时间");
      }
    },
    // 选择结束时间
    selectEndTime() {
      if (
        this.collectionDataList.endTime <= this.collectionDataList.startTime
      ) {
        this.$message.error("报名截止时间不能早于报名开始时间");
      }
    },
    test() {
      console.log(1222);
      console.log(this.collectionDataList.constraint);
    },
    // 报名费
    collShowFree() {
      this.showRadio3 = !this.showRadio3;
    },
    // 默认选项
    handleCheckAllChange(val) {
      this.checkedinfoOptions = val ? infoOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedinfoOptionsChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.infoOptions.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.infoOptions.length;
    },
    // 自定义选项
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: "",
        key: Date.now()
      });
    },
    // 上传文件
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    }
  },
  components: {
    TeacherHeader,
    Footer
  }
};
</script>
<style lang="less">
// @import "../../assets/css/index.less";

#coll-list {
  @import "../../assets/less/coll-list.less";
  .el-switch__core {
    width: 40px !important;
    height: 20px !important ;
  }
}
</style>